import { useState, useEffect } from 'react'

/**
 * 媒体查询 Hook
 */
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false)

  useEffect(() => {
    const media = window.matchMedia(query)
    
    // 初始检查
    if (media.matches !== matches) {
      setMatches(media.matches)
    }

    // 监听变化
    const listener = () => setMatches(media.matches)
    
    // 使用新的 API（如果支持）
    if (media.addEventListener) {
      media.addEventListener('change', listener)
      return () => media.removeEventListener('change', listener)
    } else {
      // 旧版浏览器兼容
      media.addListener(listener)
      return () => media.removeListener(listener)
    }
  }, [matches, query])

  return matches
}

/**
 * 检测是否为移动设备
 */
export function useIsMobile() {
  return useMediaQuery('(max-width: 768px)')
}

/**
 * 检测是否为平板设备
 */
export function useIsTablet() {
  return useMediaQuery('(min-width: 768px) and (max-width: 1024px)')
}

/**
 * 检测是否为桌面设备
 */
export function useIsDesktop() {
  return useMediaQuery('(min-width: 1024px)')
}

/**
 * 检测屏幕方向
 */
export function useOrientation() {
  const isPortrait = useMediaQuery('(orientation: portrait)')
  return isPortrait ? 'portrait' : 'landscape'
}

/**
 * 检测深色模式偏好
 */
export function usePrefersDarkMode() {
  return useMediaQuery('(prefers-color-scheme: dark)')
}

/**
 * 检测是否支持触摸
 */
export function useIsTouchDevice() {
  const [isTouch, setIsTouch] = useState(false)

  useEffect(() => {
    setIsTouch(
      'ontouchstart' in window ||
      navigator.maxTouchPoints > 0 ||
      // @ts-ignore
      navigator.msMaxTouchPoints > 0
    )
  }, [])

  return isTouch
}

